﻿
<#import "common/app-field.ftl" as fieldftl>
<#assign entityName=root.entityName />  
<#assign formList=root.dataSource.formList/>
<#assign titleName=root.moduleProperties.caption/>
<#assign i18nKey=root.moduleProperties.i18nKey/>
<#assign moduleKey=root.moduleProperties.key/>

<template>
       <div  class="wrapper" ref="filter-page" :style="cityExtendStyle">
		      <wxc-minibar   :title="title"
                       background-color="white"
					   @wxcMinibarRightButtonClicked="wxcMinibarRightButtonClicked"
                       @wxcMinibarLeftButtonClicked="wxcMinibarLeftButtonClicked"
					   right-text = "取消"
					   :use-default-return="false">
			  </wxc-minibar>  
			  <scroller    class="scroller-content">
		      <#list formList as form> 
				<#if form.isMaster> <#--主表-->
				<div  class="form-title"><text class="font-28">{{root['${form.i18nKey!form.caption}']}}</text></div>  
						<#list form.fieldList as field>
							<#if field.key!="">
								<@fieldftl.getFilterFieldEdit form=form field = field />
							</#if>
						</#list>
				<#else><#--子表-->
											
				</#if>
	          </#list>
              </scroller>
              <!--  索引单选  -->
			<qx-select ref="qxselect"
              animationType="push"
              :sourceData="sourceData"
              :currentLocation="currentText"
              cityStyleType="list"
              @wxcCityItemSelected="itemSelect"
              @wxcCityOnInput="onInput"></qx-select>
              
               <!--  索引多选  -->
			 <qx-grid-select ref="qxgridselect"
              animationType="push"
              :sourceData="sourceData"
              cityStyleType="list"
              @qxSureGridSelect="qxSureGridSelect"
              @wxcCityOnInput="onInput"></qx-grid-select>
              
              <!--  日期组件，暂时不用  -->
			  <#--  <wxc-page-calendar 
			  		   :date-range="dateRange"
                       animationType="push"
					   :selected-note="['','','']"
                       :selected-date="selectDate"
                       :minibar-cfg="minibarCfg"
                       @wxcPageCalendarBackClicked="wxcPageCalendarBackClicked"
                       @wxcPageCalendarDateSelected="wxcPageCalendarDateSelected"
                       ref="wxcPageCalendar"></wxc-page-calendar>  -->

		<div     class="nav" ref="bottomNav" >
			<div class="nav-cell"><text class="nav-text">重置</text></div>
			<div class="nav-cell"><text class="nav-text"  @click="doQuery">查询</text></div>
    	</div>
    </div>
       
</template>
<script>
import  i18nMdJson from  '../../../i18n/module/${moduleKey}' ;
import QxSelect from '../../../components/qx-select';
import QxGridSelect from '../../../components/qx-grid-select';
import  QxCell   from  '../../../components/qx-cell';
import { WxcMinibar, WxcCell,WxcPageCalendar,Utils,WxcStepper } from 'weex-ui';
import Title from '../../_mods/title.vue';
import Category from '../../_mods/category.vue';
import { ConvertPinyin,formatDate } from  '../../../filters';
import jwpf from '../../../components/jwpf';
import  {$curUserLoginName$,$curUserId$,$curOrgId$,$curOrgCode$,$curUserEmployeeId$,$curUserName$ }  from  '../../../components/systemVar'
const picker = weex.requireModule('picker');
export default {
	 components: { QxCell, WxcMinibar, WxcCell,Title, Category,QxSelect,QxGridSelect,WxcPageCalendar,WxcStepper },
    data:()=>({
		platform:weex.config.env.platform.toLowerCase(),
		index:-1,
        minibarCfg:{
        	title: '日期选择'
      	},
      	 selectDate:[],
		currentEditField:'',
		root:i18nMdJson,
        sourceData:{
			hotList:[],
			normalList:[]
		},
      	currentText: '加载中'
	    <#list formList as form> 
					<#if form.isMaster>					
						<@fieldftl.getInitFilterField form = form />								
					</#if>
					<#if !form.isMaster> 
						,${form.lcKey}s:[{						
														id:null
											<#list  form.fieldList as  field >
												<#if  field.key!="">
														,${field.key}:null
												</#if>
											</#list>
						}]
					</#if>
	    </#list>
	    <#-- 数据源 -->
		<#list formList as form>      
			<#list form.fieldList as field>
				<#if field.key!="">
					<#if field.editProperties.formula?? && field.editProperties.formula.type??>
						<#if field.editProperties.formula.type==1||field.editProperties.formula.type==1||field.editProperties.formula.type==1> <#-- 固定值 -->
							<#if  field.dataProperties.dataType="dtString">
								,filter_INS_${field.key}DataSource:[]
							<#elseif  field.dataProperties.dataType="dtLong">
								,filter_INL_${field.key}DataSource:[]
							</#if>
						</#if>
					</#if>
				</#if>
			</#list>
		</#list>
	}),
	created(){
	   this.initDataSource();
	   jwpf.setObj(this);
	},
	mounted () {
		//this.initTimer();
    },
    props:{
		animationType:{
           type:String,
		   default:'push'
		},
        popupType:{
            type:String,
            default:''
        }
	},
	methods:{
	  <#list formList as form>
            	<#if form.isMaster >
            		<#if form.extension?? && form.extension.editPage??>
            			<#assign eventList =form.extension.editPage.eventList >
	            			<#if eventList?? && eventList?size gt 0>
	            				<#list eventList as event>
	            					<#if event?? && event.content?? && event.content!="">
	            					  	${event.key}(){
		            					 		try{
		            					 			${event.content}
		            					 		}catch(ex){
		            					 			this.alert("执行主表单事件${event.key}出现异常:" + ex);
		            					 		}
		            					  },	            					  		            					 		
	            					</#if>
	            				</#list>
	            			</#if>
            		</#if>
            	</#if>
   	  </#list>
   	   initTimer(){
		let  _wait_=null;
   	  	if(_wait_){
   	  	    clearTimeout(_wait_);
   	  	}
   	  	_wait_=setTimeout(
   	  		()=>{
			    if(this.popupType=='add')
   	  			if(this.onAfterAddInit){
   	  			     this.onAfterAddInit();
   	  			}
   	  		},
   	  	300)
   	  },
	  doQuery(){
		  let  filterParams = {};
		  for(let key in  this.item){
			  if(key.indexOf('caption')==-1&&this.item[key]){
				  filterParams[key]=this.item[key];
			  }
		  }
		  let  callFunc = ()=>{
			  this.$emit("doRefreshListPage",{filterParams:filterParams});
		  }
		  this.show(false,callFunc);
	  },
	  wxcMinibarRightButtonClicked(){
		  this.show(false);
	  },
	  wxcMinibarLeftButtonClicked(){
		  this.show(false);
	  },
	  initDataSource(){
	       <#list formList as form>      
	          <#list form.fieldList as field>
				<#if field.key!="">
					<#if field.dataProperties.dataType="dtString">
						<#assign prefix = "filter_INS_"/>
					<#elseif field.dataProperties.dataType="dtLong">
						<#assign prefix = "filter_INL_"/>
					<#else>
						<#assign prefix = ""/>
					</#if>
					<@fieldftl.initDataSource form=form field = field  prefix = prefix />
				</#if>
	          </#list>
	    </#list>
           
      },
	  listConvertPinYin(){
             this.sourceData.normalList.forEach(element => {
				 if(!element.pinYin){
					 element.pinYin = ConvertPinyin(element.name);				 }
			 });
	  },
	  listSelectClick(e){	
	   let fieldKey = e.fieldKey;
	   let index = e.index;
	   let formlcName = e.formlcName;
       let fieldDataSource = this[formlcName+'_'+fieldKey+'DataSource'];
       let fieldValue  = this.item[fieldKey];
       let fieldText = this.item[fieldKey+'_caption'];
	   fieldDataSource.forEach(element => {
				 element.id = element.key;
				 element.name = element.caption;
				 element.pinYin = ConvertPinyin(element.caption);
		});
			this.sourceData.normalList = fieldDataSource;
			
			this.currentEditForm = formlcName;
			this.currentIndex = index;
			this.currentEditField = fieldKey;
			this.currentText = fieldText||this.currentText;
			this.$refs['qxselect'].show();
	  },		
      itemSelect (e) {
		      if(this.currentIndex==-1){
				  this.item[this.currentEditField] =e.item.id;
			  	  this.item[this.currentEditField+'_caption'] = e.item.name;	
			  }else{
				  this[currentEditForm][updated][currentIndex][this.currentEditField] =e.item.id;
				  this[currentEditForm][updated][currentIndex][this.currentEditField+'_caption'] = e.item.name;
			  }		  
      },   
	  gridSelectClick(e){	
		  let fieldKey = e.fieldKey;
	   	  let index = e.index;
	      let formlcName = e.formlcName;
       let fieldDataSource = this[formlcName+'_'+fieldKey+'DataSource'];
       let fieldValue  = this.item[fieldKey];
       let fieldText = this.item[fieldKey+'_caption'];
			 fieldDataSource.forEach(element => {
				 element.value = element.key;
				 element.title = element.caption;
				 element.pinYin = ConvertPinyin(element.caption);
			 });
            
			this.sourceData.normalList = fieldDataSource;
			
			 this.currentEditForm = formlcName;
			 this.currentIndex = index;
			 this.currentEditField = fieldKey;
			 this.currentText = fieldText||this.currentText;
			 this.$refs['qxgridselect'].show();
	  },		
      qxSureGridSelect(e){
		  if(this.currentIndex==-1){
				  this.item[this.currentEditField] =e.checkedValueList.join(',');
			  	  this.item[this.currentEditField+'_caption'] = e.checkedTitleList.join(',');	
			  }else{
				  this[currentEditForm][updated][currentIndex][this.currentEditField] =e.checkedValueList.join(',');
				  this[currentEditForm][updated][currentIndex][this.currentEditField+'_caption'] = e.checkedTitleList.join(',');
			  }		  
      },
      calenderFieldClick(fieldKey){
		  let fieldVal = this.item[fieldKey];
		  if(isNaN(fieldVal)&&!isNaN(Date.parse(fieldVal))){
			  this.selectDate[0] = fieldVal;
		  }else{
			  this.selectDate[0] = jwpf.now();
		  }
		   this.currentEditField = fieldKey;
		   this.$refs['wxcPageCalendar'].show();
	  },
	  wxcPageCalendarBackClicked(){
				
	  },
	  wxcPageCalendarDateSelected(e){
				this.item[this.currentEditField] = e.date[0];
	  },
      onInput (e) {
      },
      stepperValueChange(fieldKey){
              this.item[fieldKey] = this.$refs[fieldKey].value;
	  },
       //选择数据
	  pickData(e){
		  let  fieldKey = e.fieldKey;
		  let  index = e.index;    //表数据行号，如果是主表传入的是-1
		  let  formlcName = e.formlcName;
		  let  curKey = e.curKey;
		  let  pickerValues= [];
		  let  pickerCaptions = [];
		  let  pickerIndex;
		   this[formlcName+'_'+fieldKey+'DataSource'].forEach((el,i)=>{
			   pickerValues.push(el.key);
			   pickerCaptions.push(el.caption);
			   if(el.key ==curKey){
                      pickerIndex=i;
			   }
		   });
		   //pick()方法的index参数在web端是数组，在原生端是数字
		   if(this.platform=="web"){
			  pickerIndex =pickerIndex? [pickerIndex]:[0];
		  }
		  else{
			  pickerIndex=pickerIndex>=0?pickerIndex:0;
		  }
		  
		  picker.pick({
			  height: '500px',
			  index:pickerIndex,
			  items:pickerCaptions,
			  title:'请选择'
		  },event=>{
			  if(event.result==='success'){
				  pickerIndex = event.data;
				  if(index==-1){
				  	this.item[fieldKey] = pickerValues[pickerIndex];
					  this.item[fieldKey+'_caption'] = pickerCaptions[pickerIndex];	
			  }else{
				  	this[formlcName]['updated'][index][fieldKey] =pickerValues[pickerIndex];
					this[formlcName]['updated'][index][fieldKey+'_caption'] =pickerCaptions[pickerIndex];
					  
			  }	
			  }
		  });
	  },
	  //选择日期、时间
       pickDate(e){
		   let fieldKey = e.fieldKey;
		   let  index = e.index;
		   let formlcName = e.formlcName;
		   let  curKey = e.curKey;
		   if(e.curKey){
			    this.dateValue = this.dateValue|| formatDate(new Date(curKey),'yyyy-MM-dd');
			    this.timeValue = this.timeValue||formatDate(new Date(curKey),'hh:mm');
		   }
		   else{
			   this.dateValue = this.dateValue|| formatDate(new Date(),'yyyy-MM-dd');
			   this.timeValue = this.timeValue|| '00:00';
		   }
        picker.pickDate({
			height: '500px',
    		value:this.dateValue
        }, event => {
          if (event.result === 'success') {
			this.dateValue = event.data;
			if(index==-1){
				  this.item[fieldKey] = this.dateValue+' '+this.timeValue;	
			  }else{
				  this[formlcName]['updated'][index][fieldKey] =this.dateValue+' '+this.timeValue;
			  }	
			this.pickTime(e);
          }
		});
	  },
	  pickTime(e){
		     let fieldKey = e.fieldKey;
		   let  index = e.index;
		   let formlcName = e.formlcName;
		   let  curKey = e.curKey;
		  picker.pickTime({
			  height: '500px',
			  value:this.timeValue
		  },event=>{
			  if(event.result == 'success'){
				this.timeValue = event.data;
				
			    if(index==-1){
				  	this.item[fieldKey] = this.dateValue+' '+this.timeValue;	
			  	}else{
				  	this[formlcName][updated][index][fieldKey] =this.dateValue+' '+this.timeValue;
			  	}	
			  }
		  })
	  },
	  //子表新增
	  doAddSubItem(subLcKey){
		  switch(subLcKey){
			<#list formList as form> 
					<#if !form.isMaster> 
					    case '${form.lcKey}s':{
							this.${form.lcKey}s.updated.push({
								<#list  form.fieldList as  field >
									<#if  field.key!="">
										'${field.key}':null<#if field_has_next>,</#if>
									</#if>
								</#list>
							});
							break;
						}
			</#if>
			</#list>
		  }
	  },
	  initDefaultData(){
		  <#list formList as form> 
					<#if form.isMaster>
					this.item={
							id:null
									<#list form.fieldList as field>
										<#if field.key?? && field.key!="">
												<#assign editType = field.editProperties.editType/>							
												,${field.key}:	null						
												<#if editType=="ComboBox" || editType=="ComboBoxSearch" >
												,${field.key}_caption:'请选择'							
												</#if>							
										</#if>						
									</#list>
					};
					</#if>
				<#if !form.isMaster> 
					this.${form.lcKey}s={
						updated:[{
													id:null
										<#list  form.fieldList as  field >
											<#if  field.key!="">
													,${field.key}:null
											</#if>
										</#list>
						}],
						deleted:[]
					};
	  			</#if>
	 </#list>
	  },
	  show(status =true,callback=null){
		  const ref = this.$refs['filter-page'];
        if (this.animationType === 'push') {
          Utils.animation.pageTransitionAnimation(ref, `translateX(${r'${status ? -750 : 750}'}px)`, status, callback)
        } else if (this.animationType === 'model') {
          Utils.animation.pageTransitionAnimation(ref, `translateY(${r'${status ? -Utils.env.getScreenHeight() : Utils.env.getScreenHeight()}'}px)`, status, callback)
        }
	  }
	},
	computed:{
		cityExtendStyle () {
			return Utils.uiStyle.pageTransitionAnimationStyle(this.animationType)
		 },
		 dateRange(){
			 let d = [];
			 d[0] = new Date().getFullYear()+'-01-01';
			 d[1] = new Date().getFullYear()+'-12-31';
			 return d;
		 },
	     title(){
	          if(this.popupType=='add'){
	          	return '新增'+this.root['${i18nKey!titleName}'];
	          }else if(this.popupType=='modify'){
	            return '修改'+this.root['${i18nKey!titleName}'];
	          }
	     },
	     contentStyle(){
              const PageHeight = Utils.env.getPageHeight();
              let contentHeight;
              if(this.isListEdit) {
                contentHeight=PageHeight-100;
                }else{
                  contentHeight = PageHeight
               }
               return  { height: contentHeight + 'px' };                  
         }
	}
}
</script>


<style scoped>
.wrapper {
    position: fixed;
    width: 100%;
    background-color: #F2F3F4;
  }
.form-title{
	width: 750px;
	flex-direction:row;
	justify-content:space-between;
	margin-top:8px;
}

.edit-field{
   flex:2;
   flex-direction:row;
}
.subList-title{
	flex-direction:row;
	background-color:aliceblue;
	justify-content:space-between;
}
.sub-add{
	margin-top:8px;
    justify-content:center;
    align-items:center;
	padding-top:5px;
	height:100px;
	background-color:white;
	border-top-color:#ebe8e8dc;
    border-top-style:ridge ;
    border-top-width: 2px;
	border-bottom-color:#ebe8e8dc;
    border-bottom-style:ridge ;
    border-bottom-width: 2px;
}
.scroller-content{
	flex:1;
	border-top-color:#e0dddd;
    border-top-style:ridge ;
    border-top-width:2px;
	padding-bottom:30px;
}
.is-danger{
	text-align: center;
	color: rgb(218, 30, 30);
}
.nav {
    left: 0;
    flex-direction: row;
    align-items: center;
    bottom: 0;
	border-top-color:#ebe8e8dc;
    border-top-style:ridge ;
    border-top-width: 2px;
  }
  .nav-cell {
    flex: 1;
    height:100px;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
  }
  .nav-cell:active{
     background-color:#00BDFF;
  }
  
  .input {
  text-align: right;
  padding-left: 10px;
  height: 100px;
  font-size:28px;
 flex: 2;
 }
</style>
<style src='../../../style/main.css' />

